<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleArr">数组操作</button>
    <button @click="handleObj">对象操作</button>
    <!--    操作数组-->
    <ul>
        <li v-for="item in arr">item:{{item}}</li>
    </ul>
    <!--    操作对象-->
    <ul>
        <li v-for="(value,key) in obj">value:{{value}}</li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                arr:['北京','上海','深圳'],
                obj:{
                    name:'zhangsan',
                    age:18
                }
            }
        },
        methods:{
            //关于数组的响应式处理
            handleArr(){
                //    直接通过下标无法触发视图的更新
                //     this.arr[0] = '武汉'
                //vue内部重写了操作数组的七种方法，使得数据的更新触发视图的更新
                this.arr.unshift('成都')
            },
            //关于对象的响应式处理
            handleObj(){
                //    新增或删除无法触发视图的更新
                //     delete this.obj.name
                this.$set(this.obj,'sex','女')
                this.$delete(this.obj,'age')
                this.obj={...this.obj,grade:'un'}
            }
        }
    })
</script>
</body>
</html>